<template>
    <div>

        <div class="container">
            <div class="table_btn">

                <label class="table-label">登录地址:</label>
                <el-input v-model="query.ip"  placeholder="登录地址" class="menu-input" clearable></el-input>

                <label class="table-label">登录名称:</label>
                <el-input v-model="query.username"  placeholder="登录名称" class="menu-input" clearable></el-input>

                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>

                <el-button type="default" icon="el-icon-refresh" @click="searchReset">重置</el-button>

            </div>
            <div class="table_btn">
                <el-button type="success" icon="el-icon-edit" @click="forceExit()">强退</el-button>
            </div>
            <div class="box_table">
                <el-table
                        :data="tableData"
                        border
                        @selection-change="handleSelectionChange"
                        style="width: 100%">

                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>

                    <el-table-column
                            prop="id"
                            label="序号"
                            width="80">
                    </el-table-column>

                    <el-table-column
                            prop="uuid"
                            label="会话编号"
                            width="250">
                    </el-table-column>

                    <el-table-column
                            prop="user_name"
                            label="用户名"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="ip"
                            label="IP"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="explorer"
                            label="浏览器"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="os"
                            label="操作系统"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            prop="create_time"
                            label="创建时间"
                            :formatter="dateFormat">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    icon="el-icon-edit"
                                    type="primary"
                                    @click="forceExit(scope.row.id)">
                                强退
                            </el-button>
                        </template>
                    </el-table-column>

                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :total="pageTotal"
                        :current-page.sync="currentPage"
                        :page-size="pageSize"
                        @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>

    </div>
</template>
<script>

    import utils  from "@/utils/function"
    const  { request,dateFormat } = utils
    import Paging from "@/utils/paging"
    const paging = new Paging("/system/monitor/online/list")

    export default {
        data() {

            return {
                tableData: [],
                pageTotal: 0,
                multipleSelection:[],           //列表中checkbox选中的值
                query: {                        //查询数据
                    ip:"",
                    username:""
                },
                currentPage:1,
                pageSize:5

            }
        },
        created() {
            this.getUserList({page:1,pageSize:this.pageSize})
        },
        methods: {
            dateFormat(row, column, cellValue, index){
              if(row.create_time){
                  return dateFormat(row.create_time)
              } else {
                  return ""
              }
            },
            forceExit(id){            //强退
                if(id){
                    this._forceExit(id)
                } else {
                    if(this.multipleSelection.length < 1){
                        this.$message.error('选择要强退的用户');
                        return ;
                    }

                    this._forceExit(this.multipleSelection.map(value => value.id))
                }
            },

            _forceExit(ids){
                this.$confirm('对用户执行强退操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(()=>{
                    if(_.isNumber(ids)){
                        ids = [ids]
                    }
                    if(!_.isArray(ids)){
                        return false;
                    }

                    request.post("/system/monitor/online/force-logout",{ids}).then(response=>{
                        console.log(response);
                        let {code,data,msg} = response
                        if(code === 0){
                            this.getUserList({page:this.currentPage})
                            this.$message({
                                type: 'success',
                                message: msg
                            });
                        } else {
                            this.$message.error(msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    })

                }).catch((error) => {
                    console.log(error);
                    this.$message({
                        type: 'info',
                        message: '操作失败，请重试!'
                    });
                })
            },
            handlePageChange(val) {             //获取分页数据
                this.currentPage = val
                this.getUserList({page:val})
            },
            handleSearch(){             //查询
                paging.setQuery( _.cloneDeep(this.query) );
                this.handlePageChange(1)
            },
            searchReset(){                  //查询重置
                _.forOwn(this.query,(value, key)=>{
                    this.$set(this.query,key,'')
                })
                this.handleSearch()
            },
            getUserList(param){           //获取列表数据
                paging.request(param).then(response=>{
                    let {code,data:{total,list},msg} = response
                    if(code === 0){
                        this.pageTotal = total
                        if(_.isArray(list) && list.length > 0){
                            this.tableData = list
                        } else {
                            this.tableData = []
                        }

                    } else {
                        this.$message.error(msg);
                    }
                }).catch(error=>{
                    console.log(error);
                });
            },

            clearFilter() {
                this.$refs.filterTable.clearFilter();
            },
            filterTag(value, row) {
                return row.status === value;
            },
            handleSelectionChange(val) {        //列表中checkbox选中事件
                this.multipleSelection = val;
            }
        }

    }
</script>
<style lang="scss" scoped>

</style>
